import styles from "./index.module.less";
import { modalConfig } from "@userList/modal";
import { isResetOldPassword } from "@home/store";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { stepIntroList } from "@home/driverConfig";
import { modalInputValidators } from "@userList/store";
export default defineComponent({
  setup() {
    const defineModal = modalConfig();
    if (isResetOldPassword.value === true) {
      const { formState, title, visible } = defineModal;
      clearObjAttr(formState);
      title.value = $t("base.changePsd");
      initObjAttr(modalInputValidators, createArray(false, 2));
      visible.value = true;
    }
    const options = reactive({
      showProgress: true,
      nextBtnText: $t("home5"),
      prevBtnText: $t("home6"),
      doneBtnText: $t("home7"),
      progressText: "{{total}}/{{current}}",
      steps: stepIntroList,
    });
    let driverObj = driver(options);
    watch(
      [() => $t("home5"), () => $t("home6"), () => $t("home7")],
      (newArrayVal, oldArrayVal) => {
        options.nextBtnText = newArrayVal[0];
        options.prevBtnText = newArrayVal[1];
        options.doneBtnText = newArrayVal[2];
        driverObj = driver(options);
      }
    );
    const handleDriver = () => {
      driverObj.drive();
    };
    return () => (
      <>
        <div class={styles.wrap}>
          <div class={styles.content}>
            <div class={styles.version}>
              <i>{$t("home1")}:</i>
              {/* @ts-ignore */}
              <i>{__APP_VERSION__}</i>
            </div>

            <div class={styles.branch}>
              <i>{$t("home2")}:</i>
              {/* @ts-ignore */}
              <i>{__APP_BRANCH__}</i>
            </div>

            {isProdEnv.value ? (
              <div class={styles.update_time}>
                <i>{$t("home3")}:</i>
                {/* @ts-ignore */}
                <i>{__APP_UPDATE_TIME__}</i>
              </div>
            ) : null}

            <a-button type="primary" onClick={handleDriver}>
              {$t("home0")}
            </a-button>

            {/* <svg-icon name="编辑" class="s-svg-icon-size" /> */}
          </div>
        </div>

        <s-modal {...defineModal} />
      </>
    );
  },
});
